<template>
  <!-- 案件分配，分配模式 -->
  <div class="component distribution-pattern row  middle-span">
    <div>
      共选择<span class="case-count">{{caseIds.length}}</span>条案件
    </div>
    <el-radio-group v-model="distributionMode" class="patterns">
      <el-radio v-for="(parrent,index) of patternCollection" :key="index" :label="parrent.value">{{parrent.name}}</el-radio>
    </el-radio-group>
    <el-checkbox v-model="debtCase" v-if="distributionMode!=='BY_CUSTOMIZE'" class="right-button">共债案件优先分配到同一催收员</el-checkbox>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Emit } from 'vue-property-decorator';
import { namespace } from "vuex-class";
import { DISTRIBUTION_TYPE } from "~/config/enum.config";

const AllotModule = namespace("case-allot")

@Component({
  components: {},
})
export default class DistributionPattern extends Vue {
  @AllotModule.State private caseIds;
  @AllotModule.State private mode;
  @AllotModule.State private debt;
  @AllotModule.Mutation private updateMode;
  @AllotModule.Mutation private updateDebtState;

  private patternCollection = DISTRIBUTION_TYPE


  @Emit('modeChange')
  private emitModeChange(){ }

  @Emit('debtChange')
  private emitDebtChange(){ }

  private get distributionMode(){
    return this.mode
  }

  private set distributionMode(val){
    this.updateMode(val)
    this.emitModeChange()
  }

  private get debtCase(){
     return this.debt === "YES"
  }

  private set debtCase(val){
    this.updateDebtState(val)
    this.emitDebtChange()
  }

}
</script>
<style lang="less" scoped>
.component.distribution-pattern {
  .types {
    width: 140px;
  }
  .right-button{
    margin-left:30px;
  }
  .patterns {
    padding-left: 40px;
    line-height: inherit!important;
  }
  .case-count{
    display:inline-block;
    padding: 0 4px;
    font-weight: bold;
  }
}
</style>
